<template>
    <div class="login-con">
 <div class="login-box">
     <!-- 头像区域 -->
     <div class="pic-box">
         <img src="../assets/千库网_卡通蓝色人物头像_元素编号12544782.png" alt="">
     </div>
     <!-- 登录表单区域 -->
     <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login-form">
         <!-- 用户名 -->
        <el-form-item  prop="username">
        <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop='password'>
            <el-input v-model="loginForm.password" prefix-icon="el-icon-s-goods" type="password"></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item  class="btns">
                <el-button type="primary" @click="login" >登录</el-button>
                <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
        </el-form>
 </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                // 这是登录表单的数据绑定对象
                loginForm: {
                    username: 'admin',
                    password: '123456'
                },
                // 这是表单的验证规则对象
                loginFormRules: {
                    // 验证用户名是否合法
                    username: [{
                        required: true,
                        message: '请输入你的用户名/手机号/邮箱地址',
                        trigger: 'blur'
                    }, {
                        min: 5,
                        max: 12,
                        message: '用户名长度应在 5 到 12 个字符',
                        trigger: 'blur'
                    }],
                    // 验证密码是否合法
                    password: [{
                        required: true,
                        message: '请输入你的密码',
                        trigger: 'blur'
                    }, {
                        min: 6,
                        max: 18,
                        message: '密码长度在 6 到 18个字符',
                        trigger: 'blur'
                    }]

                }

            }
        },
        methods: {
            //点击重置按钮。重置登录表单
            resetLoginForm() {
                // console.log(this);
                this.$refs.loginFormRef.resetFields();
            },
            login() {
                this.$refs.loginFormRef.validate(async valid => {
                    if (!valid) return;
                    // const result = await this.$http.post("login", this.loginForm);
                    // console.log(result);
                    //返回的结果是一个promise对象。 所以以上操作可以用 async 与await
                    //得到的结果又data为服务器返回的结果 可以对结果进行解构
                    const {
                        data: res
                    } = await this.$http.post("login", this.loginForm);
                    console.log(res);
                    //然后对res里的状态进行判断  不等于200就说明没有这个用户登录失败
                    if (res.meta.status !== 200) return this.$message.error('账户密码错了哦，请重新输入');
                    this.$message.success('登录成功');
                    //将登录成功的tokenbao'cun 到客户端de sessionStorage中
                    //项目中除了登录之外的其他api接口  必须在登录之后才能访问
                    //token只应在当前网站打开期间生效 所以讲token保存在sessionStorage
                    //通过变成熟导航跳转到后台主页  路由地址是/home
                    window.sessionStorage.setItem("token", res.data.token);
                    this.$router.push("/home");
                    //接着配置home路由相关
                });
            }
        },
    }
</script>


<style lang="less" scoped>
    .login-con {
        background-color: hsla(177, 89%, 86%, 0.843);
        height: 100%;
    }
    
    .login-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 440px;
        height: 300px;
        background-color: #fff;
        border-radius: 20px;
        .pic-box {
            padding: 8px;
            height: 130px;
            width: 130px;
            border: 1px solid #fff;
            border-radius: 50%;
            box-shadow: 0 0 8px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: hsl(184, 86%, 85%);
            }
        }
    }
    
    .login-form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 25px;
        box-sizing: border-box;
        /* 这个组件表单默认盒子属性是内容盒子 所以加padding会撑开 改变box-sizing属性就可以 */
    }
    
    .btns {
        /* 让两个按钮水平向右分布 */
        display: flex;
        justify-content: flex-end;
    }
</style>